<script setup lang='ts'>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import useInstance from "@/hooks/useInstance";
import { roleSaveOrUpdateApiPost } from "@/api/userMangement.ts";
defineOptions({
  name: "addListAd",
});
const emit = defineEmits(["refresh",'searchEdit']);
const { global } = useInstance();
const roleFormRef = ref<FormInstance>();
const dialogBasic = ref({
  title: "新建产品",
  visible: false,
  width: 600,
  height: 300,
  showFooter: true,
  marginTop: "10vh",
});

const roleForm = reactive<any>({
  code: null, // 角色编码
  name: null, // 角色名称
  department: null, // 部门
  remarks: null, // 备注
  isEnabled: null, // 是否启用
});
const rules = reactive<FormRules>({
  code: [
    {
      required: true,
      trigger: "blur",
      message: "请输入角色编码",
    },
    {
      pattern: /^[A-Z_]+$/,
      message: "请输入大写字母",
    },
  ],
  name: [
    {
      required: true,
      trigger: "blur",
      message: "请输入角色名称",
    },
  ],
  department: [
    {
      required: true,
      trigger: "blur",
      message: "请选择角色所在部门",
    },
  ],
  remarks: [
    {
      required: true,
      trigger: "blur",
      message: "请填写角色备注",
    },
  ],
});
//显示弹框
const show = (type: string, row?: any) => {
  resetForm();
  global.$resetForm(roleFormRef.value, roleForm);
  if (type === "add") {
    dialogBasic.value.title = "新建角色";
  } else {
    dialogBasic.value.title = "角色编辑";
    global.$objCopy(roleForm, row);
   
  }
  dialogBasic.value.visible = true;
};
const onClose = () => {
  dialogBasic.value.visible = false;
  Object.keys(roleForm).forEach((it) => (roleForm[it] = null));
};
const onConfirm = async () => {
  await roleFormRef.value?.validate(async (isOk) => {
    if (isOk) {
      try {
        const res = await roleSaveOrUpdateApiPost(roleForm);
        if (res.code == 20000) {
          if(roleForm.id){
            emit('searchEdit')
          }else{

            emit("refresh");
          }
          onClose();
          ElMessage({
            type: "success",
            message: roleForm.id ? "角色编辑成功 请重试！" : "角色新增成功 ",
          });
        }
      } catch (error) {
        ElMessage({
          type: "error",
          message: roleForm.id ? "角色编辑失败 请重试！" : "角色新增失败",
        });
      }
    } else {
      ElMessage({
        type: "error",
        message: roleForm.id
          ? "角色编辑失败 请重试！"
          : "角色新增失败 请重试！",
      });
    }
  });
};
const resetForm = () => {
  roleFormRef.value?.resetFields();
};
defineExpose({
  show,
});
</script>

<template>
  <SysDialog
    :title="dialogBasic.title"
    :width="dialogBasic.width"
    :height="dialogBasic.height"
    :show-footer="dialogBasic.showFooter"
    :visible="dialogBasic.visible"
    :margin-top="dialogBasic.marginTop"
    @on-close="onClose"
    @on-confirm="onConfirm"
  >
    <template v-slot:content>
      <el-form
        ref="roleFormRef"
        :model="roleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="角色编码" prop="code">
          <el-input
            v-model.trim="roleForm.code"
            placeholder="请输入大写英文字母"
          >
       
          </el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色部门" prop="department">
          <el-input v-model="roleForm.department" />
        </el-form-item>
        <el-form-item label="角色备注" prop="remarks">
          <el-input v-model="roleForm.remarks" />
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
</template>

<style lang='scss' scoped></style>
